const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HTMLPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
const ExtractPlugin = require('extract-text-webpack-plugin') //css 单独分离

const isDev = process.env.NODE_ENV === "development"


const config = {
	target:'web', //因为开发的是前端网页项目
	entry: path.join(__dirname, 'src/index.js'),// 输入文件
	output: {
		filename: 'bundle.[hash:8].js',
		path: path.join(__dirname,'dist') //输出文件
	},
	module: {
		rules:[
			{
				test:/\.vue$/,
				loader:'vue-loader'
			},
			{
				test: /\.jsx$/,
				loader: 'babel-loader'
			},
			{
			  test: /\.css$/,
			  oneOf: [
				// this matches `<style module>`
				{
				  resourceQuery: /module/,
				  use: [
					'style-loader',
					{
					  loader: 'css-loader',
					  options: {
						modules: true,
						camelCase:true,
						localIdentName: '[local]_[hash:base64:5]'
					  }
					}
				  ]
				},
				// this matches plain `<style>` or `<style scoped>`
				{
				  use: [
					'style-loader',
					'css-loader'
				  ]
				}
			  ]
			},
			{
				test: /\.(gif|jpg|jpeg|png|svg)$/,
				use: [
					{
						loader:'url-loader',
						options: {
							limit: 1024,
							name:'[name]-wl.[ext]'
						}
					}
				]
			}
		]
	},
	plugins: [
		new	webpack.DefinePlugin({
			'process.env':{
				NODE_ENV : isDev ? '"development"' : '"production"'
			}
		}),//作用是判断环境根据不同环境打包不同
		// make sure to include the plugin for the magic
		new VueLoaderPlugin(),// vue-loader 新特性
		new HTMLPlugin()
	]
	
}
// 判断不同环境显示不同
if(isDev){
	config.module.rules.push({
		test: /\.styl/,
		use: [
			'style-loader',
			'css-loader',
			{
				loader: 'postcss-loader',
				options: {
					sourceMap: true,
					
				}
			},
			'stylus-loader'
		]
	})
	config.devtool = '#cheap-module-eval-source-map' 
	config.devServer = {
		port:8000,
		host:'0.0.0.0',//建议设置0.0.0.0
		overlay:{
			errors:true, //提示错误会显示到网页上
		},
		hot:true,//不会整个页面加载
		
		// historyFallback:{}  单页应用没用映射的地址可以做入口
		// open:true 自动打开浏览器
	},
	config.plugins.push(
		new webpack.HotModuleReplacementPlugin(), //不会刷新整个页面
		new webpack.NoEmitOnErrorsPlugin()
	)
} else {
	config.entry = {
		app: path.join(__dirname, 'src/index.js'),
		vendor: ['vue']
	}
	config.output.filename = '[name].[chunkhash:8].js'
	config.module.rules.push(
		{
			test: /\.styl/,
			use: ExtractPlugin.extract({
				fallback: 'style-loader',
				use: [
					'css-loader',
					{
						loader: 'postcss-loader',
						options: {
							sourceMap: true,
							
						}
					},
					'stylus-loader'
				]
			})
		},
	)
	config.plugins.push(
		new ExtractPlugin('styles.[contentHash:8].css'),
		new webpack.optimize.CommonsChunkPlugin({
			name: 'vendor'
		}),
		new webpack.optimize.CommonsChunkPlugin({
			name: 'runtime'
		})
	)
}

module.exports = config